<!-- 关联合同控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <a-input v-model="modelValue" @click="getData" :disabled="props.disabled" />
  </a-space>
  <a-modal
    v-model:visible="visible"
    class="form-modal"
    width="60%"
    :esc-to-close="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>
      <h2>关联合同</h2>
    </template>
    <div class="meta" style="margin-bottom: 10px">
      <a-input-search
        search-button
        v-model="contract.name"
        @search="getData"
        :style="{ width: '320px' }"
        placeholder="请输入合同名称"
      />
    </div>
    <div class="form-list-content">
      <a-table
        row-key="id"
        :data="contract"
        :row-selection="rowSelection"
        :pagination="pagination"
        v-model:selectedKeys="selectedKeys"
        @select="select"
        @page-change="pageChange($event)"
        @page-size-change="pageSizeChange($event)"
      >
        <template #columns>
          <a-table-column title="合同名称" data-index="name"></a-table-column>
          <a-table-column
            title="创建者"
            data-index="createByName"
          ></a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive, onMounted } from 'vue';
  import {
    GetContractListAll,
    GetContractDetail,
  } from '@/api/contract-management/contract-list';
  import miiter from '@/utils/mitt';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list/index';

  const emit = defineEmits(['update:oneValue']);
  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      disabled?: boolean;
      oneValue: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  const client = ref();
  const Supplier = ref();
  const visible = ref(false);
  const contractNumber = computed(() => {
    return props.oneValue;
  });
  interface DataType {
    id: number;
    cli_name: string;
  }
  const contract = ref<DataType[]>([]);
  const modelValue = ref<number | string>();
  const params = reactive({
    data: {
      page: 1,
      size: 10,
    },
  });
  // 数据条数改变时触发
  const pageSizeChange = (pageSize: any) => {
    params.data.size = pageSize;
  };
  // 选择器配置
  const rowSelection = reactive({
    type: 'radio',
  });
  const selectedKeys = ref<any>([]);
  selectedKeys.value = [props.oneValue];
  interface ItemType {
    item: {
      number: number;
      name: string;
      id: number | null;
    };
  }
  const selectedObj = reactive<ItemType>({
    item: { number: 0, name: '', id: null },
  });
  const select = (
    rowKeys: (string | number)[],
    d: string | number,
    tableData: any
  ) => {
    selectedObj.item = tableData;
  };
  // 分页配置
  const pagination = reactive({
    total: 0,
    showTotal: true,
    showJumper: true,
    showPageSize: true,
  });
  const radioValue = ref(Number(props.oneValue));

  const getData = async () => {
    if (!client.value && !Supplier.value) {
      let res = await GetContractListAll({ ...params.data });
      contract.value = res.content;
      pagination.total = res.pageable.totalItems;
      visible.value = true;
    } else {
      visible.value = true;
    }
  };

  // 根据客户id获取关联合同
  const getSupplierTieupContract = async (id: number) => {
    let res = await GetContractListAll({
      supplierId: id,
      ...params.data,
    });
    contract.value = res.content;
    // pagination.total = res.pageable.totalItems;
  };

  // 根据客户id获取关联合同
  const getClientTieupContract = async (id: number) => {
    let res = await GetClientDetailTabs({ id: client.value, typeId: 6 });
    contract.value = res;
    // pagination.total = res.pageable.totalItems;
  };

  //页码改变时触发
  const pageChange = (pageIndex: any) => {
    params.data.page = pageIndex > 1 ? pageIndex : 1;
    getData();
  };

  const handleOk = async () => {
    emit('update:oneValue', selectedObj.item.id);
    modelValue.value = selectedObj.item.name;
  };

  const getContractObj = async () => {
    if (props.oneValue !== '' && typeof props.oneValue === 'number') {
      const res = await GetContractDetail({
        id: props.oneValue,
      });
      selectedObj.item = res;
      modelValue.value = selectedObj.item.name;
    }
  };
  onMounted(() => {
    getContractObj();
  });

  // miiter.on('clientRefresh', (val: any) => {
  //   if (val.key !== 'supplier') {
  //     client.value = Number(val.item.id);
  //     getClientTieupContract(Number(val.item.id));
  //   } else {
  //     Supplier.value = Number(val.item.id);
  //     getSupplierTieupContract(Number(val.item.id));
  //   }
  // });

  const handleCancel = () => {
    // TODO:
  };
</script>

<style scoped lang="less"></style>
